<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo croppic</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/main.css" rel="stylesheet">
    <link href="assets/css/croppic.css" rel="stylesheet">
</head>
<style>
.container{height: 100%; width: 100%; background: #666; position: absolute;}
.wedimg{position: absolute;}
.wedimg img{width: 100%; height: 100%;position: absolute;}
</style>
<body>

<div  id="pimg"  class="wedimg" onclick="showBox(this);" style="width: 414px; height: 265px; left: 0px; top: 0.144px; animation: fadeInUp 1500ms ease 200ms both;">
<img class="wedpedImg" data-order="h" data-width="414" data-height="265" data-id="23808" src="https://www.zx6.cn/album/albumf.png">
</div>
<div id="pimg2" class="wedimg" onclick="showBox(this);" style="width: 414px; height: 265px; left: 0px; top:270px; animation: fadeInUp 1500ms ease 200ms both;">
<img class="wedpedImg" data-order="h" data-width="414" data-height="265" data-id="23808" src="https://www.zx6.cn/album/albumf.png">
</div>

<!--<div class="face">-->
    <!--<form id="form_face" enctype="multipart/form-data" style="width:auto;" action="img_save_to_file.php">-->
        <!--<input type="file" name="img" id="fileToUpload" onchange="fileSelected(this);" style="display:none;">-->
    <!--</form>-->
<!--</div>-->

<!--<div class="container" id="crop-box" style="display: none;">
    <div class="row mt ">
        <div class="col-lg-4 ">
            <div id="cropContainerModal"></div>
        </div>
    </div>
</div>-->

<script src=" https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.mousewheel.min.js"></script>
<script src="croppic.js"></script>
<script>
    function showBox(obj) {
        var data = $(obj).children('.wedpedImg').data();
        console.log(data);
        var croppicContainerModalOptions = {
            uploadUrl:'https://qj.xiwed.cn/api/s2/crop_choose',
            cropUrl:'https://qj.xiwed.cn/api/s2/crop_save',
            modal:true,
            imgEyecandyOpacity:0.4,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(e){
                console.log('onAfterImgUpload');
                console.log(e);
            },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onReset:function(){ console.log('onReset') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
        }
        var cropContainerModal = new Croppic($(obj).attr('id'), croppicContainerModalOptions);
        var oDiv = document.getElementById($(obj).attr('id') + "_imgUploadField");

        oDiv.onclick = function (ev) {
            var oEvent = ev || event;
            oEvent.cancelBubble = true;
            oEvent.stopPropagation();
        }
        oDiv.click();
    }




</script>
</body>
</html>
